// asset thumbnail viewer
.pcui-asset-thumb {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &.asset-icon-prefix {
        &::before {
            @extend .font-icon;

            margin: auto;
        }

        > img {
            display: none;
        }

        // fix some misaligned font icons
        &.type-bundle::before {
            padding-top: 3px;
        }

        &.type-template::before {
            padding-top: 4px; // fix misaligned font icon
        }

        &.type-font-source::before {
            padding-top: 4px; // fix misaligned font icon
        }
    }

    > img {
        width: 100%;
        height: 100%;
    }

    > canvas {
        width: 100%;
        height: 100%;
        background-color: $bcg-dark;
    }

    > .flip-y {
        transform: scale(1, -1);
    }

    &.pcui-asset-thumb-empty::before {
        display: block;
        content: '';
        width: 100%;
        height: 100%;

        @include checkerboard(#465659, #5b696c, calc(66px / 5));
    }
}

// showing multiple values
.pcui-asset-thumb.pcui-multiple-values {
    > img,
    > canvas {
        display: none;
    }
}

// hovered state
.pcui-asset-thumb:not(.pcui-readonly, .pcui-disabled, .pcui-asset-thumb-empty, .pcui-asset-thumb-missing) {
    &:hover {
        cursor: pointer;
        box-shadow: $element-shadow-hover;
    }
}
